<!doctype html>
<html lang="en" ng-app="myapp">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>仿百度搜索——案例</title>
  <style type="text/css">
	*{margin:0px;padding:0px;}
	a{text-decoration:none;color:#141414;display:inline-block;width: 100%;height: 100%;text-indent:0.5em;}
	#box{width:500px;margin:100px auto;}
	#box input{line-height:32px;width:99.1%;text-indent:0.5em;font-size:14px;}
	#box ul li{list-style:none;line-height:32px;border:1px solid #141414;border-bottom:0px;font-size:14px;}
	#box ul li:first-child{border:1px solid #141414;border-top:0px;border-bottom:0px;}
	#box ul li:last-child{border:1px solid #141414;}
	#box ul li:hover{background:#F8F8F8;}
  </style>
 </head>
 <body>
	<div id="box">
		<input type="text" id="keyword" onkeyup="loadKeyword(this)"/>
		<ul id="ullist"></ul>
	</div>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script>
	function loadKeyword(obj){
		/*改变搜索框的内容后让list列表显示*/
		$("#ullist").stop().fadeIn("slow")
		var key = obj.value;
		$.getJSON("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+key+"&cb=?",function(data){
			var datas = data.s;
			var html = "";
			for(var i=0;i<datas.length;i++){
				html +="<li><a href='javascript:void(0)' onclick='tmchange(this)'>"+datas[i]+"</a></li>";
			}
			$("#ullist").html(html);
		});
	}
	/*将搜索框中的内容替换为点击对应的内容*/
	function tmchange(obj){
		var txt = $(obj).text();
		$("#keyword").val(txt);
		/*搜索框的内容改变完成后让list列表隐藏*/
		$("#ullist").stop().fadeOut("slow");
	}
	</script>
 </body>
</html>
